<template>
	<view class="root">
		<view class="navigation fixed width-100vw fd-row jc-sa bgc-fff">
			<label
				v-for="(nav, index) in navigation"
				:key="index"
				:class="[
					{ active: navIndex === index },
					'lh-80',
					'color-999',
					'relative',
				]"
				@click="switchNav(index)"
			>
				<text class="fs-28">{{ nav.title }}</text>
				<text class="fs-24">({{ nav.number }})</text>
			</label>
		</view>

		<view class="mt-100 pt-20 pb-30 bgc-fff">
			<view
				v-for="(order, orderIndex) in orders.list"
				:key="orderIndex"
				class="br-10"
			>
				<view class="option br-10">
					<view class="fd-row ai-center ml-30 mr-30 mt-12">
						<image
							class="width-80 height-80 br-circle"
							:src="
								order.avatarUrl ||
								'/static/images/default-avatar.png'
							"
							mode="aspectFill"
						/>
						<view class="f1 ml-12">
							<text class="fs-28 color-1b1b1b">
								{{ order.nickName }}
							</text>
							<text class="fs-22 color-999">
								下单时间：{{ order.add_time }}
							</text>
						</view>
						<image
							@click="makeCallPhone(order.phoneNumber)"
							class="width-54 height-54"
							src="/static/images/icon-call.png"
							mode="aspectFit"
						/>
					</view>

					<view class="service fd-row mt-10 bgc-f7f7f7">
						<image
							class="bgc-eee cover br-10"
							:src="order.cover"
							mode="aspectFill"
						/>

						<view class="f1 ml-24">
							<text class="color-1b1b1b fs-30">
								{{ order.storeName }}
							</text>
							<text class="color-999 fs-24">
								服务项目：{{ order.items.toString() }}
							</text>
							<text class="color-999 fs-24">
								数量：x{{ order.item_count }}
							</text>
							<text class="color-ff4a5b fs-24">
								￥{{ order.total_money }}
							</text>
						</view>
						<uni-icons
							@click="showMore(orderIndex)"
							:style="{
								transform: `rotate(${
									order.showMore ? '180deg' : 0
								})`,
							}"
							type="arrowdown"
							color="#999"
							class="as-end pl-10 pr-10 pt-10 pb-10"
						/>
					</view>

					<block v-if="order.showMore">
						<view class="color-666 fs-24 ml-30 mr-30 lh-2 mt-12">
							<text>订单编号：{{ order.sn }}</text>
							<text>车牌：{{ order.numberPlate }}</text>
							<text>车型：{{ order.carType }}</text>
							<text>地址：{{ order.address }}</text>
						</view>

						<view
							class="fd-row ai-center jc-sb ml-30 mr-30 pt-24 pb-30"
						>
							<view
								v-for="(service, serviceIndex) in services"
								:key="service.name"
								hover-class="tap-hover"
								@click="
									operation(
										orderIndex,
										service.name,
										serviceIndex !== order.deal_status
									)
								"
								:class="[
									{
										active:
											serviceIndex === order.deal_status,
									},
									'service-status',
								]"
							>
								<image
									class="width-60 height-60"
									:src="`/static/images/icon-${service.name}.png`"
									mode="aspectFit"
								/>
								<text>
									{{ service.text }}
								</text>
							</view>
							<button
								class="btn-complete fs-24 lh-2 ml-0 mr-0"
								:disabled="order.deal_status !== 3"
								@click="
									operation(
										orderIndex,
										'finish',
										order.deal_status !== 3
									)
								"
							>
								完成
							</button>
						</view>
					</block>
				</view>
			</view>

			<uni-load-more :status="loadStatus" />
		</view>
	</view>
</template>

<script lang="ts">
	import { Pager } from "@/common/type";
	import Vue from "vue";
	import Component from "vue-class-component";
	import uniIcons from "../../components/uni-icons/uni-icons.vue";
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";

	let requestFlag: boolean = false;
	@Component({ components: { uniIcons, uniLoadMore } })
	export default class Order extends Vue {
		navIndex: number = -1;
		loadStatus: string = "loading";

		services: AnyObject[] = [
			{ name: "arrived", text: "我已到达" },
			{ name: "camera", text: "拍照检查" },
			{ name: "start", text: "开始服务" },
		];
		orders: Pager<AnyObject> = {
			list: [],
			page: 1,
		};
		navigationNumbers: AnyObject = {};

		public get navigation(): AnyObject[] {
			return [
				{
					title: "全部",
					number: this.navigationNumbers.count_all,
				},
				{
					title: "待服务",
					number: this.navigationNumbers.count_wait,
				},
				{
					title: "服务中",
					number: this.navigationNumbers.count_working,
				},
				{
					title: "已完成",
					number: this.navigationNumbers.count_finish,
				},
			];
		}

		onLoad({ type }: AnyObject) {
			this.switchNav(+type || 0);
		}

		onShow() {
			this.orders = { list: [], page: 1 };
			this.getData();
		}
		onNavigationBarButtonTap(e: AnyObject) {
			if (e.float !== "right") return;
			uni.navigateTo({ url: "/pages/home/submitInformation" });
		}

		switchNav(index: number) {
			if (this.navIndex === index) return;

			this.navIndex = index;

			this.orders = { list: [], page: 1 };
			this.getData();
		}

		operation(index: number, name: string, stop: boolean) {
			if (stop) return;

			const { order_id } = this.orders.list[index];
			switch (name) {
				case "arrived":
					this.request
						.get("/employee/changeOrderStatus", {
							order_id,
							status: 1,
						})
						.then(({ msg: title }) => {
							uni.showToast({ title });
							this.orders.list[index].deal_status++;
							this.$forceUpdate();
						});
					break;
				case "camera":
					uni.navigateTo({
						url: `/pages/home/submitInformation?type=check&order_id=${order_id}`,
					});
					break;
				case "start":
					this.request
						.get("/employee/changeOrderStatus", {
							order_id,
							status: 3,
						})
						.then(({ msg: title }) => {
							uni.showToast({ title });
							this.orders.list[index].deal_status++;
							this.$forceUpdate();
						});
					break;
				case "finish":
					uni.navigateTo({
						url: `/pages/home/submitInformation?type=finish&order_id=${order_id}`,
					});
					break;
				default:
					break;
			}
		}

		showMore(index: number) {
			this.orders.list[index].showMore = !this.orders.list[index].showMore;
		}

		getData() {
			if (requestFlag || !this.orders.page) return;
			this.loadStatus = "loading";
			requestFlag = true;

			this.request
				.get("/employee/orderList", {
					status: this.navIndex,
					page: this.orders.page,
				})
				.then(({ data }) => {
					data.count && (this.navigationNumbers = data.count);

					this.orders.page = +data.page;
					this.orders.list.push(...data.list);
					this.loadStatus = +data.page ? "more" : "noMore";

					requestFlag = false;
				});
		}

		makeCallPhone(phoneNumber: string) {
			uni.makePhoneCall({ phoneNumber });
		}
	}
</script>

<style lang="scss" scoped>
	.root {
		.navigation {
			z-index: 9;
			.active {
				color: #1b1b1b;
				&::after {
					content: "";
					position: absolute;
					width: 72%;
					height: 5rpx;
					background-color: #1c9dff;
					border-radius: 3rpx;
					bottom: 0;
					left: 50%;
					margin-left: -36%;
				}
			}
		}
		.option {
			margin: 0 30rpx 30rpx;
			box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.1);
			.service {
				padding: 20rpx 30rpx;
				.cover {
					width: 145rpx;
					height: 145rpx;
				}
			}
			.service-status {
				position: relative;
				align-items: center;
				color: #666;
				opacity: 0.3;
				font-size: 20rpx;
				line-height: 2;
				&.active {
					opacity: 1;
					color: #1b1b1b;
				}
				&::after {
					content: "";
					position: absolute;
					left: 100%;
					top: 30rpx;
					width: 77rpx;
					border-top: 1rpx dashed #bfbfbf;
				}
			}
			.btn-complete {
				transform: translateY(-20rpx);
			}
		}
	}
</style>